<link rel="stylesheet" href="{{ 'component-card.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'component-price.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'component-product-grid.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'section-product-recommendations.css' | asset_url }}" media="print" onload="this.media='all'">

<noscript>{{ 'component-card.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'component-price.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'component-product-grid.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'section-product-recommendations.css' | asset_url | stylesheet_tag }}</noscript>

<style>
  ul.cart-recommendations {
    display: flex;
    width: 100%;
}
.cart-recommendations .product-grid .grid__item{
  width: 25%;
  padding: 0;
}
.cart-recommendations .product-recommendations .grid {
    margin-left: 0;
}
.recommendations-container li{
  width: 25%;
  max-width: 25%;
}
.card--product{
  position: relative;
}
.add_to_cart .product-form__submit{
  font-size: 16px;
  height: 48px;
}
.product-cart_recommendations .grid__item{
  max-width: 25%;
}
.recommendations-container li:nth-child(n+5){
  display:none;
}

@media screen and (max-width: 750px){
  .recommendations-container li{
  width: 50%;
  max-width: 50%;
}
.cart .collection .product-grid li {
    padding-left: 14px;
}
.cart .collection .product-grid {
    margin-left: -14px;
}
.product-cart_recommendations .grid__item {
    max-width: 50%;
}
}
</style>



{% if cart != empty %}

<div class="page-width cart-recommendations">
  <h2 class="product-recommendations__heading">{{ section.settings.heading | escape }}</h2>
  {% if recommendations.performed and recommendations.products_count > 0 %}
    <ul class="grid grid--2-col grid--4-col-desktop product-grid" role="list">
      {% for recommendation in recommendations.products %}
        <li class="grid__item" id="{{ recommendation.id }}">
          {% render 'product-card',
            product_card_product: recommendation,
            media_size: section.settings.image_ratio,
            show_secondary_image: section.settings.show_secondary_image,
            add_image_padding: section.settings.add_image_padding,
            show_vendor: section.settings.show_vendor,
            show_image_outline: section.settings.show_image_outline,
            show_rating: section.settings.show_rating,
            add_to_cart: section.settings.add_to_cart
          %}
        </li>
      {% endfor %}
    </ul>
  {% endif %}
</div>

<div id="recommendations-container" class="recommendations-container page-width">
  <ul class="grid"></ul>
</div>
<script>
  let cartItemArr = [];
  const sectionId =  `{{ section.id }}`;
  const Title =  document.querySelector('.product-recommendations__heading');
</script>

{% for item in cart.items %}
   <script>
      cartItemArr.push({
        product_id: `{{ item.product_id }}`
      });
    </script>
{% endfor %}

<script>

$(function(){
  async function queryRecommendations (url) {
    const res = await fetch(url);
    return res.text();
  }
  
  const urlPrefix = `{{ routes.product_recommendations_url }}?section_id={{ section.id }}&limit=4&intent=complementary&product_id=`
  
  const stack = [];
  async function invoke () {
    for (let i = 0; i < cartItemArr.length; i++ ) {
      const item = cartItemArr[i];
      const text = await queryRecommendations(`${urlPrefix}${item.product_id}`);
      const html = document.createElement('div');
      html.innerHTML = text;
      const recommendations = html.querySelectorAll('.cart-recommendations li.grid__item');
      if (typeof recommendations !== 'undefined' && recommendations !== null) {
        for (let k = 0; k < recommendations.length; k++) {
          const id = recommendations[k].id;
          if (!stack[id]) {
            stack[id] = recommendations[k];
          }
        }
      }
    }
    
    render();
  }
  
  function render () {
    const nodeContainer = document.querySelector('#recommendations-container ul');
    Object.keys(stack).forEach((key) => {
      nodeContainer.appendChild(stack[key]);
    })

    if (!nodeContainer.hasChildNodes()) {
      const recommendationsTitle = document.querySelector('.cart-recommendations h2');
      recommendationsTitle.classList.add('hidden');
    }
    console.log(nodeContainer.hasChildNodes())

  }
  
  invoke();

})


</script>

{% else %}

  <div class="page-width product-cart_recommendations">
    <h2 class="product-recommendations__heading">{{ section.settings.heading | escape }}</h2>
    {%- liquid
      assign products_to_display = section.settings.collection.all_products_count

      if section.settings.collection.all_products_count > section.settings.products_to_show
      assign products_to_display = section.settings.products_to_show
      assign more_in_collection = true
      endif
      -%}
    <div class="cart_collection collection{% if section.settings.swipe_on_mobile == true and section.settings.collection.all_products_count > 2 and section.settings.products_to_show > 2 %} page-width-desktop{% endif %}">
      <slider-component class="slider-mobile-gutter">
        <ul class="grid grid--2-col product-grid{% if products_to_display == 4 or section.settings.collection == blank %} grid--2-col-tablet grid--4-col-desktop{% else %} grid--3-col-tablet{% endif %}{% if products_to_display > 5 %} grid--one-third-max grid--4-col-desktop grid--quarter-max{% endif %}{% if section.settings.collection.all_products_count > 2 and section.settings.swipe_on_mobile and section.settings.products_to_show > 2 %} slider slider--tablet grid--peek{% endif %}{% if section.settings.show_view_all == false or section.settings.collection.products.size < section.settings.products_to_show %} negative-margin{% endif %}{% if section.settings.show_view_all and section.settings.collection.products.size > section.settings.products_to_show %} negative-margin--small{% endif %}" role="list">
        {%- for product in section.settings.collection.products limit: 4 -%}
        {%- unless list_id contains product.id -%}
          <li class="grid__item{% if section.settings.collection.all_products_count > 2 and section.settings.swipe_on_mobile and section.settings.products_to_show > 2 %} slider__slide{% endif %}">
            {% render 'cart-product-card',
              product_card_product: product,
              media_size: section.settings.image_ratio,
              show_secondary_image: section.settings.show_secondary_image,
              add_image_padding: section.settings.add_image_padding,
              show_vendor: section.settings.show_vendor,
              show_image_outline: section.settings.show_image_outline,
              show_rating: section.settings.show_rating,
              add_to_cart: section.settings.add_to_cart
            %}
          </li>
        {%- endunless -%}
        {%- else -%}
        {%- for i in (1..4) -%}
          <li class="grid__item">
            {% render 'product-card-placeholder' %}
          </li>
        {%- endfor -%}
        {%- endfor -%}
        </ul>
      </slider-component>
    </div>  
  </div>

{% endif %}

{% schema %}
{
  "name": "Cart page recommendations",
  "tag": "section",
  "class": "spaced-section",
  "settings": [
    {
      "type": "paragraph",
      "content": "t:sections.product-recommendations.settings.paragraph__1.content"
    },
    {
      "type": "text",
      "id": "heading",
      "default": "You may also like",
      "label": "t:sections.product-recommendations.settings.heading.label"
    },
    {
    "type": "collection",
    "id": "collection",
    "label": "Collection"
    },
    {
      "type": "header",
      "content": "t:sections.product-recommendations.settings.header__2.content"
    },
    {
      "type": "select",
      "id": "image_ratio",
      "options": [
        {
          "value": "adapt",
          "label": "t:sections.product-recommendations.settings.image_ratio.options__1.label"
        },
        {
          "value": "portrait",
          "label": "t:sections.product-recommendations.settings.image_ratio.options__2.label"
        },
        {
          "value": "square",
          "label": "t:sections.product-recommendations.settings.image_ratio.options__3.label"
        }
      ],
      "default": "adapt",
      "label": "t:sections.product-recommendations.settings.image_ratio.label"
    },
    {
      "type": "checkbox",
      "id": "show_secondary_image",
      "default": false,
      "label": "t:sections.product-recommendations.settings.show_secondary_image.label"
    },
    {
      "type": "checkbox",
      "id": "add_image_padding",
      "default": false,
      "label": "t:sections.product-recommendations.settings.add_image_padding.label"
    },
    {
      "type": "checkbox",
      "id": "show_image_outline",
      "default": true,
      "label": "t:sections.product-recommendations.settings.show_image_outline.label"
    },
    {
      "type": "checkbox",
      "id": "show_vendor",
      "default": false,
      "label": "t:sections.product-recommendations.settings.show_vendor.label"
    },
    {
      "type": "checkbox",
      "id": "show_rating",
      "default": false,
      "label": "t:sections.product-recommendations.settings.show_rating.label",
      "info": "t:sections.product-recommendations.settings.show_rating.info"
    },
    {
      "type": "text",
      "id": "add_to_cart",
      "default": "add to cart",
      "label": "add to cart"
    }
  ],
  "presets": [
    {
      "name": "Cart page recommendations"
    }
  ]
}
{% endschema %}
